<!-- 主题设置模板 -->
<script type="text/html" template lay-done="layui.data.theme();">
    {{#
    var local = layui.data(layui.setter.tableName)
    ,theme = local.theme || {}
    ,themeColorIndex
    ,v3ThemeData = [
    {
    "alias": "dark_blue"
    ,"header": "#fff"
    ,"main": "#03152A"
    ,"logo": "#03152A"
    },
    {
    "alias": "white-theme"
    ,"header": "#fff"
    ,"main": "#fff"
    ,"logo": "#fff"
    }
    ];
    var local = window.localStorage.getItem('layuiAdmin');
    if(local && local != '{}'){
        themeColorIndex = JSON.parse(local).theme.color.index
    }else{
        themeColorIndex = 1
    }
    var autoUnfold = window.localStorage.getItem('autoUnfold')?window.localStorage.getItem('autoUnfold'):'true';
    }}
    <div class="layui-card-header">
        配色方案
    </div>
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="bgcolor" style="font-size: 15px">布局颜色</a></legend>
    </fieldset>
    <div class="layui-card-body layadmin-setTheme">
        <ul class="layadmin-setTheme-color">
            {{# layui.each(v3ThemeData, function(index, item){ }}
            <li layadmin-event="setTheme" data-index="{{ index }}" data-alias="{{ item.alias }}"
                class="{{index === themeColorIndex?'layui-this':''}}" title="{{ item.alias }}">
                <div class="layadmin-setTheme-header" style="background-color: {{ item.header }};"></div>
                <div class="layadmin-setTheme-side" style="background-color: {{ item.main }};">
                    <div class="layadmin-setTheme-logo" style="background-color: {{ item.logo }};"></div>
                </div>
            </li>
            {{# }); }}
        </ul>
    </div>
    <fieldset class="layui-elem-field layui-field-title site-title" >
        <legend><a name="bgcolor" style="font-size: 15px">主题设置</a></legend>
    </fieldset>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">主题颜色</label>
            <div class="layui-input-inline" style="width: 120px;">
                <div id="ID-colorpicker-demo-predefine-1"></div>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">展开菜单栏</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-skin="switch" value="1" lay-filter="autoUnfold" title="自动|手动" {{# if(autoUnfold== 'true'){ }}checked{{# } }}>
            </div>
        </div>
    </form>

</script>
<script>
    layui.use(function () {
        var colorpicker = layui.colorpicker, color = window.localStorage.getItem('defaultColor');
        // 渲染

        colorpicker.render({ // eg1
            elem: '#ID-colorpicker-demo-predefine-1',
            color: color ? color : '#16b777',
            predefine: true // 开启预定义颜色
            , change: function (color) {
                var a = layui.$, c = a('.custom-style'), h = '';
                h += '.layui-menu .layui-menu-item-checked .faster-title {color: ' + color + ' !important;}';
                h += '.layui-menu .layui-menu-item-checked:after {border-right: 3px solid ' + color + '  !important;}';
                h += '.layui-menu-item-checked2 .faster-title {background-color: ' + color + ' !important;}';
                h += '.layui-side-menu .child-menu .layui-menu .layui-menu-item-parent:hover > div {color: ' + color + ' !important;}';
                h += '.white-theme .layui-menu-item-checked2 .faster-title:hover {background-color: ' + color + ' !important;}';
                h += '.layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: ' + color + ';}';
                h += '.layadmin-pagetabs .layui-tab-title li:after{ background-color: ' + color + ';}';
                h += '.layadmin-pagetabs .layui-tab-title li .layui-tab-close:hover { background-color: ' + color + ';}';
                h += '.layui-btn { background-color: ' + color + ';}';
                c.html(h);
                a('.layadmin-iframe').contents().find('.custom-style').html(h);
                window.localStorage.setItem('defaultColor', color)
            },
        });
    });
    layui.data.theme = function () {
        layui.use('form', function () {
            var form = layui.form
                , admin = layui.admin;
            form.render();
            //监听隐藏开关
            form.on('switch(autoUnfold)', function (e) {
                window.localStorage.setItem('autoUnfold', e.elem.checked)
                window.location.reload();
            });
        });
    };
</script>